<template>
  <section class="case">
    <div class="title">
      <h2>{{CaseData.title}}</h2>
    </div>
    <img :src="CaseData.imgUrl1"/>
    <img :src="CaseData.imgUrl2"/>
    <p class="introduce">{{CaseData.introduce}}</p>
  </section>
</template>

<script>
export default {
  name: 'Case',
  props: ['CaseData']
}
</script>

<style lang="stylus" scoped>
  .case
    .title
      text-align center
      overflow hidden
      margin 50px 0
      position relative
      h2
        font-size 35px
        line-height 1.1
        color: #d50f30
      h2:before
        position absolute
        top 40%
        left 3%
        display block
        content ""
        height 4px
        margin-top -1px
        width 160px
        background #d50f30
      h2:after
        position absolute
        top 40%
        right 3%
        display block
        content ""
        height 4px
        margin-top -1px
        width 160px
        background #d50f30
    img
      width 100%
      height auto
    .introduce
      padding 30px
      font-size 27px
      color #666
      line-height 1.5
</style>
